<template>
	<view>
		<view class="gridContainer">
			<view class="nav-list" :style="{ 'justify-content': eleLength > 2 ? 'space-between' : eleLength == 1 ? 'flex-start' : 'space-around' }">
				<navigator
					hover-class="none"
					:url="'/servicerPages/servicer/' + item.url"
					class="nav-li"
					navigateTo
					:class="'bg-' + item.color"
					v-for="(item, index) in elements"
					:key="index"
				>
					<view class="nav-title">{{ item.title }}</view>
					<!-- <view class="nav-name">{{ item.name }}</view> -->
					<text :class="'cuIcon-' + item.cuIcon"></text>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			elements: [
				{
					title: '服务单下单',
					url: 'placeServiceOrder',
					color: 'mauve',
					cuIcon: 'post'
				}
			]
		};
	},
	computed: {
		eleLength() {
			return this.elements.length;
		}
	}
};
</script>

<style lang="less">
@import '../../common/common.less';
.gridContainer {
	.nav-li {
		width: 48%;
	}
}
</style>
